<template>
  <div class="main-body">
    <div id="list">
      <div id="list_bg"></div>
<!--      <div class="top" id="top">-->
<!--        <div class="lunaSearch">-->

<!--          <router-link to="/session" class="logo clickreport-luna-logo">-->
<!--            <img :src="require('@/assets/logo.png')" alt=""/>-->
<!--          </router-link>-->


<!--          <div class="searchTxtarea">-->
<!--&lt;!&ndash;            <a onclick="" href="" class="city"><i>郑州</i></a>&ndash;&gt;-->
<!--            <span data-listtouchtag="lunalist_search_3"-->
<!--              ><form action="">-->
<!--                <input-->
<!--                  type="text"-->
<!--                  class="searchArea"-->
<!--                  placeholder="找工作 找房子 找搬家"-->
<!--                /></form-->
<!--            ></span>-->
<!--          </div>-->
<!--        </div>-->
<!--        &lt;!&ndash; <div class="filter">-->
<!--          <ul class="filter_title">-->
<!--            <li data-listtouchtag="lunalist_a_1"><span>区域</span></li>-->
<!--            <li data-listtouchtag="lunalist_a_2"><span>类别</span></li>-->
<!--            <li data-listtouchtag="lunalist_a_3"><span>价格</span></li>-->
<!--          </ul>-->
<!--          <div class="filterContainer"><div class="filterBox"></div></div>-->
<!--        </div> &ndash;&gt;-->
<!--      </div>-->

      <!-- comment dialog begin -->
      <el-dialog
        v-model="commentDialog.visible"
        custom-class="comment-list-dialog"
        title=""
        width="90%"
      >
        <div>
          <el-form label-width="auto" :label-position="'top'">
            <el-form-item label="内容">
              <el-input
                v-model="commentDialog.commentFormData.content"
                type="textarea"
              ></el-input>
            </el-form-item>

            <el-form-item style="text-align: right">
              <div style="text-align: right; width: 100%">
                <el-button type="primary" @click="submitComment()"
                  >提交</el-button
                >
              </div>
            </el-form-item>
          </el-form>
        </div>
      </el-dialog>
      <!-- comment dialog end -->

      <!-- comment-list-dialog begin -->
      <el-dialog
        v-model="commentListDialogVisible"
        custom-class="comment-list-dialog"
        title=""
        width="90%"
      >
        <!-- <span>This is a message</span> -->

        <ul
          v-infinite-scroll="loadCommentList"
          :infinite-scroll-disabled="scroll.disabled"
          :infinite-scroll-distance="50"
          :infinite-scroll-delay="300"
          class="comment-list"
          id="comment-list"
        >
          <li v-for="comment in commentList">
            <div class="comment-item" style="font-size: 0.3rem">
              <span class="comment-user" style="font-size: 0.4rem; color: green"
                >{{ comment.name }}:</span
              >
              <span
                class="reply-for"
                v-if="
                  comment.referenceName != '' &&
                  comment.referenceName != undefined &&
                  comment.referenceName != null
                "
                >@{{ comment.referenceName }}</span
              >
              <span class="comment-content">{{ comment.content }}</span>
              <div class="bottom">
                <span class="icon iconfont favorite">&#xe6a0;</span>
                <span class="split-dot"></span>
                <span @click="openCommentDialog(1)">回复</span>
                <span class="split-dot"></span>
                <span class="date">{{ dateFormat(comment.date) }}</span>
              </div>
            </div>
          </li>
        </ul>
        <!-- comment form --->
        <!-- <div>
          <el-form 
          label-width="auto"
          :label-position="'top'">
            <el-form-item label="内容">
              <el-input v-model="commentDialog.commentFormData.content" type="textarea"></el-input>
            </el-form-item>
          </el-form>
        </div> -->

        <div
          v-show="currentAnswerItem != null && currentAnswerItem.scroll.loading"
          class="load"
          id="infomore"
          style="display: block; line-height: 1rem"
        >
          <i></i>加载更多
        </div>
        <div
          v-show="currentAnswerItem != null && currentAnswerItem.scroll.noMore"
          id="bottom"
          style="display: block"
        >
          我是有底线的，没有更多信息啦~
        </div>
      </el-dialog>
      <!-- comment list dialog end -->

      <!-- answer-list container begin -->
      <div style="main-container">
        <!-- question -->
        <div class="question">
          <p class="question-header">
            {{ question.title }}
          </p>
          <p class="question-body">
            {{ question.description }}
          </p>

          <div class="question-bottom">
            <span style="font-size: 0.3rem" @click="openCommentDialog(0)"
              >回复</span
            >
            <span class="date" style="font-size: 0.3rem">{{
              dateFormat(question.date)
            }}</span>
            <span class="viewed" style="font-size: 0.3rem"
              >{{ numberFormat(question.visitCount) }}浏览</span
            >
          </div>
        </div>
        <!-- question end -->

        <div style=""></div>
        <!-- answers answer-list -->
        <ul
          id="answer-list"
          v-infinite-scroll="loadAnswerList"
          :infinite-scroll-disabled="scroll.disabled"
          :infinite-scroll-distance="50"
          :infinite-scroll-delay="300"
        >
          <li class="answer-item" v-for="item in answerList">
            <div class="answer-header">
              <img class="avatar" :src="item.avatar" />
              <div class="userinfo">
                <p class="name">{{ item.username }}</p>
                <p class="date">{{ dateFormat(item.date) }}</p>
<!--                <p class="date">2025-5-31</p>-->
              </div>
            </div>

            <div class="answer-body" style="display: flex">
              <!-- left -->
              <div class="answer-body-left"></div>
              <!-- right -->
              <div class="answer-body-right">
                <div class="answer-content">
                  {{ item.content }}
                </div>

                <div class="answer-bottom">
                  <!-- remarks -->
                  <span class="remarks" @click="mark(item.id)">
<!--                    <i style="color: #00ff00" :color="iconColor" class="el-icon-edit"></i>-->
                    <el-icon :style="{color:item.isMarked? 'rgb(64, 158, 255)':''}" :color="iconColor">
                      <star />
                    </el-icon>
                    <p :style="{color:item.isMarked? 'rgb(64, 158, 255)':'',fontSize:'0.2rem'}">
                      {{ numberFormat(item.remarkCount) }}
                    </p>
                  </span>
                  <!-- answers -->
                  <span
                    class="comments"
                    @click="openCommentListDialog(item.id)"
                  >
                    <el-icon style="font-size: 0.6rem" :color="iconColor">
                      <chat-dot-round />
                    </el-icon>
                    <p style="font-size: 0.2rem">
                      {{ numberFormat(item.commentCount) }}
                    </p>
                  </span>
                </div>
              </div>
            </div>
          </li>
        </ul>
        <!-- answers end -->
      </div>
      <!-- answer-list container end -->


      <div class="list">
        <ul
          id="list-wrapper"
          :infinite-scroll-disabled="scroll.disabled"
          :infinite-scroll-distance="50"
          :infinite-scroll-delay="300"
          class="list-demo"
          style="margin-botto2m: 2.3rem; overflow: auto"
          v-if="false"
        > 
          <template v-for="item in answerList">
            <li class="clickreport-luna-post visiblereport-luna-card">
              <a class="list_demo_a" href=""
                ><div class="list_left">
                  <img :src="item.img" />
                </div>
                <dl class="list_right">
                  <dt class="item_title">
                    <p>{{ item.title }}</p>
                    <a class="location">祖安</a>
                  </dt>
                  <dd class="attr-demo">{{ item.description }}</dd>
                  <dd class="thirddd">
                    <!-- <span class="price-demo">{{ '1231' }}</span> -->
                    <!-- remarks -->
                    <span class="remarks">
                      <el-icon
                        style="font-size: 0.6rem"
                        :color="iconColor"
                        @click="openCommentListDialog(item.id)"
                      >
                        <star />
                      </el-icon>
                      <p style="font-size: 0.2rem">
                        {{ numberFormat(item.remarkCount) }}
                      </p>
                    </span>
                    <!-- answers -->
                    <span class="answers">
                      <el-icon style="font-size: 0.6rem" :color="iconColor">
                        <chat-dot-round />
                      </el-icon>
                      <p style="font-size: 0.2rem">{{ item.answerCount }}</p>
                    </span>
                    <!-- visits -->
                    <span class="visits">
                      <el-icon style="font-size: 0.6rem" :color="iconColor">
                        <View />
                      </el-icon>
                      <p style="font-size: 0.2rem">
                        {{ numberFormat(item.visitCount) }}
                      </p>
                    </span>
                    <!-- date -->
                    <span class="right_item_label"
                      ><span class="list-demo-time">{{
                        dateFormat(item.date)
                      }}</span></span
                    >
                  </dd>
                </dl></a
              >
            </li>
          </template>
        </ul>
      </div>

      <!-- style="display: block" -->

      <div
        v-show="scroll.loading"
        class="load"
        id="infomore"
        style="display: block"
      >
        <i></i>加载更多
      </div>
      <div v-show="scroll.noMore" id="bottom" style="display: block">
        我是有底线的，没有更多信息啦~
      </div>
    </div>
    <div class="searchBox">
      <div class="searchInput">
        <div class="searchTxtarea">
          <a href="" class="city">郑州</a
          ><span
            ><form action="">
              <input
                type="text"
                placeholder="找工作 找房子 找搬家"
                class="searchArea"
              /></form
          ></span>
        </div>
        <span class="close">取消</span>
      </div>
      <div class="searchHistory">
        <h2>浏览历史</h2>
        <div class="historyList"></div>
      </div>
      <div class="searchList"></div>
    </div>

    <div class="reply-bottom" style="">

      <el-input :rows="replyInputRows" @blur="replyInputRows=1" @focus="replyInputRows=2" type="textarea"   v-model="replyContent"  style="width: 95%;margin:auto;display: block;" placeholder="请输入回复信息" />
      <div class="bottom" style="">
        <span class="send-btn" style="" @click="sendReply">发送</span>
        <div style="clear: both;"></div>
      </div>

    </div>

  </div>
</template>

<script>
import {
  getQuestionApi,
  getAnswerListApi,
  getCommentListApi,
  postCommentApi,
  postAnswerApi,
} from "@/api/webApi.js"
import {
  AddLocation,
  Star,
  ChatDotRound,
  ChatRound,
  ChatLineSquare,
  Comment,
  Tickets,
  View,
} from "@element-plus/icons-vue"
import {
  numberFormat,
  dateFormat,
  dateFormatForList,
  dateFormat2,
  mockDate,
  scrollToBottom, scrollToTop
} from "@/utils/common.js"
import { ElMessageBox } from "element-plus"
import BaseListComponent from "@/pages/BaseListComponent";
// import { MessageBox } from 'element-ui';

export default {
  name: "QuestionDetail",
  components: {
    ElMessageBox,
    AddLocation,
    View,
    ChatDotRound,
    Star,
    Tickets,
  },
  // mixins:[BaseListComponent],
  setup() {
    console.log("setup")
  },
  created() {
    this.scroll.disabled = false
    this.loadAnswerList()
    console.log("created")
    let id = 0
    getQuestionApi(id)
      .then((res) => {
        let { code, msg, data } = res
        if (code == 200) {
          this.question = data
          // console.log(this.question)
        } else {
          // msg
        }
      })
      .then((err) => {
        // error
      })
  },
  mounted() {
    console.log("mounted")
  },
  methods: {
    // getQuestion(){},
    // getAnswerList(){}
    numberFormat,
    dateFormat: dateFormatForList,
    open() {
      console.log("open")
      ElMessageBox.confirm("Are you sure to close this dialog?")
        .then(() => {
          // done()
        })
        .catch(() => {
          // catch error
        })
    },
    submitComment() {
      if (this.commentDialog.posting == true) {
        return
      } else {
        this.commentDialog.posting = true
      }
      let params = {}
      params.content = this.commentDialog.commentFormData.content
      switch (this.commentDialog.mode) {
        case this.commentDialog.MODE_OF_ANSWER: 
          postAnswerApi(params)
            .then((res) => {
              let { code, msg, data } = res
              if (code == 200) {
                this.answerList.unshift(data)
                 this.commentDialog.visible  = false
                 // scrollToBottom(document.documentElement)
                scrollToTop(document.documentElement)
              } else {
                // msg
              }
            })
            .finally(() => {
              this.commentDialog.posting = false
            })

          break
        case this.commentDialog.MODE_OF_REPLY:
          postCommentApi(params)
            .then((res) => {
              let { code, msg, data } = res
              if (code == 200) {
                console.log('postComment result',data)
                // this.currentAnswerItem.commentList.push(data)
                this.currentAnswerItem.commentList.unshift(data)
                this.commentDialog.visible  = false
                console.log('scrollToBottom(document.getElementById(\'comment-list\'))')
                setTimeout(()=>{
                  scrollToTop(document.getElementById('comment-list'))
                  //scrollToBottom(document.getElementById('comment-list'))
                },500)

              } else {
                // msg
              }
            })
            .finally(() => {
              this.commentDialog.posting = false
            })
          break
      }

      // let uid = 0 // session uid
      // let o = {
      //   referenceUid: this.commentDialog.referenceUid,
      //   referenceName: this.commentDialog.referenceName,
      //   uid,
      //   questionId: this.currentAnswerItem.questionId,
      //   answerId: this.currentAnswerItem.answerId,
      //   name: "mock_name",
      // }
    },
    sendReply(){
      let params = {}
      params.content = this.replyContent
      console.log('this.replyContent',this.replyContent)
      postAnswerApi(params)
          .then((res) => {
            let { code, msg, data } = res
            if (code == 200) {
              this.answerList.unshift(data)
              //this.commentDialog.visible  = false
              this.replyContent = ''
              // scrollToBottom(document.documentElement)
              scrollToTop(document.documentElement)
            } else {
              // msg
            }
          })
          .finally(() => {
            this.commentDialog.posting = false
          })
    },
    openAnswerDialog() {
      this.commentDialog.visible = true
    },
    openCommentDialog(pid) {
      this.commentDialog.mode =
        pid == 0
          ? this.commentDialog.MODE_OF_ANSWER
          : this.commentDialog.MODE_OF_REPLY

      this.commentDialog.commentFormData = {}
      // if (
      //   this.commentDialog.commentFormData.answerId != this.currentAnswerItem.id
      // ) {
      //   this.commentDialog.commentFormData = {}
      // }

      // switch (this.commentDialog.mode) {
      // }

      this.commentDialog.visible = true
    },
    mark(currentAnswerId){
      console.log("currentAnswerId:"+currentAnswerId)
      let answerItem = this.answerList.find((val, index) => {
        return val.id == currentAnswerId
      })
      // ElMessageBox.confirm('确认执行操作？', '提示', {
      //   type: 'warning'
      // }).then(() => {
      //   const loading = ElMessageBox.loading({
      //     lock: true,
      //     text: '处理中...'
      //   });
      //   // 模拟异步操作
      //   setTimeout(() => {
      //     loading.close();
      //     this.$message.success('操作成功');
      //   }, 2000);
      // }).catch(() => {
      //   this.$message.info('已取消');
      // });

      answerItem.isMarked =typeof answerItem.isMarked === 'boolean'?answerItem.isMarked:false
      answerItem.isMarked = !answerItem.isMarked
      if(answerItem.isMarked == true){
        answerItem.remarkCount +=1
      }else{
        answerItem.remarkCount -=1
      }

    },
    openCommentListDialog(currentAnswerId) {
      let answerItem = this.answerList.find((val, index) => {
        return val.id == currentAnswerId
      })
      if (answerItem == null) {
        console.error("answerItem null :" + currentAnswerId)
        return
      }
      this.currentAnswerItem = answerItem
      this.currentAnswerId = currentAnswerId

      if (answerItem.page == null || answerItem.page == undefined) {
        answerItem.page = {
          pageIndex: 1,
          pageSize: 10,
          filters: { answerId: currentAnswerId },
        }

        answerItem.scroll = {
          height: 0,
          disabled: true,
          distance: 0,
          noMore: false,
          loading: false,
          delay: 500,
          t: null,
        }

        answerItem.commentList = []
        this.loadCommentList()
      }
      this.commentList = answerItem.commentList
      this.commentListDialogVisible = true
    },
    loadCommentList() {
      console.log('loadCommentList')
      let currentAnswerId = this.currentAnswerId
      let answerItem = this.answerList.find((val, index) => {
        return val.id == currentAnswerId
      })
      if (answerItem == null) {
        console.error("answerItem null :" + currentAnswerId)
        return
      }

      if (answerItem.scroll.noMore) {
        console.log('answerItem.scroll.noMore')
        return
      } else {
        answerItem.scroll.loading = true
      }
      // let answerId = this.commentPage.filters.answerId

      setTimeout(() => {
        getCommentListApi(answerItem.page)
          .then((res) => {
            let { code, msg, data } = res
            let { rows, count } = data
            if (code == 200) {
              answerItem.page.pageIndex += 1
              if (rows.length > 0) {
                answerItem.commentList = answerItem.commentList.concat(rows)
                this.commentList = answerItem.commentList
              } else {
                answerItem.scroll.noMore = true
              }
            } else {
              // msg
            }
          })
          .catch((err) => {})
          .finally(() => {
            answerItem.scroll.loading = false
          })
      }, 1000)
    },
    loadAnswerList() {
      if (this.scroll.disabled) {
        return
      }
      console.log("load")
      this.scroll.loading = true
      this.scroll.disabled = true
      setTimeout(() => {
        getAnswerListApi(this.page)
          .then((res) => {
            let { code, msg, data } = res
            let { rows, count } = data

            if (code == 200) {
              if (rows.length == 0) {
                this.scroll.disabled = true
                this.scroll.noMore = true
              } else {
                this.answerList = this.answerList.concat(rows)
                this.page.pageIndex += 1
              }
            } else {
              // msg
            }
          })
          .catch((err) => {})
          .finally(() => {
            this.scroll.loading = false
            setTimeout(() => {
              this.scroll.disabled = false
            }, 100)
          })
      }, 1000)
    },
  },
  data() {
    return {
      commentListDialogVisible: false,
      // iconColor: "#aaa",
      iconColor: "primary",
      commentList: [],
      question: {},
      currentAnswerId: null,
      currentAnswerItem: null,
      replyContent:'',
      replyInputRows:1,
      commentDialog: {
        visible: true,
        MODE_OF_ANSWER: 0,
        MODE_OF_REPLY: 1,
        mode: 0, // 0 回答 1 回复
        commentFormData: {},
        referenceUid: null,
        referenceName: null,
      },
      answerList: [
        // {
        //   title: "实体店专业高价回收",
        //   city: "哥伦比亚",
        //   price: "面议",
        //   date: "03-07",
        //   img: "",
        // },
      ],
      scroll: {
        height: 0,
        disabled: true, // 下拉刷新禁用
        distance: 0, // 下拉刷新触发距离
        noMore: false, // 没有更多数据
        loading: false, // 加载中
        delay: 500, // 延迟
        t: null,
      },
      page: {
        pageIndex: 1, // 分页索引
        pageSize: 10, // 分页大小
        // 过滤参数
        filters: {
          city: "哥伦比亚",
          county: "WEIU",
          type: "",
          price: "",
          keyword: "文件覅我",
        },
      },
      commentPage: {
        pageIndex: 1, // 分页索引
        pageSize: 10, // 分页大小
        filters: {
          answerId: "",
        },
      },
    }
  },
}
</script>

<style>
.reply-bottom{
  display: block;position: fixed;
  bottom:0;left:0;width: 100%;padding: 0.3rem;background:white;
}
.reply-bottom .bottom{
  position: relative;width: 95%;margin:auto;padding:0.3rem;
}
.reply-bottom .send-btn{
  font-size: 0.4rem;
  display: block;
  margin-right: 0;
  position: absolute;
  right: 0;
  top:0.1rem;
  clear: both;
  font-size: 0.36rem;
}

.comment-list-dialog {
}
.comment-list-dialog .el-dialog__header {
  padding: 0 !important;
}
.comment-list-dialog .el-dialog__body {
  /* padding-top: 1rem;
    padding-bottom: 0.2rem; */
}
.comment-list-dialog .el-dialog__headerbtn {
  top: 0 !important;
}
.comment-list-dialog .el-dialog__footer {
  padding: 0;
  margin: 0;
}
</style>
<style scoped>
/* comment-list begin */

.comment-list-dialog .el-dialog__header {
  height: 10rem;
}

.comment-list {
  background: rgba(var(--bs-light-rgb), var(--bs-bg-opacity)) !important;
  /* min-height: 5rem; */
  max-height: 10rem;
  overflow: scroll;
  /* padding-bottom: 1rem; */
}
.comment-list .comment-item {
  font-size: 0.3rem;
  margin-bottom: 0.3rem;
}
.comment-list .comment-item .comment-user {
  font-size: 0.4rem;
  color: green;
}
.comment-list .comment-item .reply-for {
  padding-left: 0.1rem;
  padding-right: 0.1rem;
  color: green;
}
.comment-list .comment-item .comment-content {
}
.comment-list .comment-item .bottom {
  display: flex;
  align-items: center;
  margin-top: 0.15rem;
  margin-bottom: 0.45rem;
}
.comment-list .comment-item .bottom .favorite {
  font-size: 0.4rem;
}
.comment-list .comment-item .bottom .split-dot {
  height: 0.1rem;
  width: 0.1rem;
  border-radius: 50%;
  background: rgb(204, 204, 204);
  margin-left: 0.1rem;
  margin-right: 0.1rem;
}
.comment-list .comment-item .bottom .date {
}

/* comment-list end */

/* question detail begin */
.question {
  padding: 0.3rem;
  background: white;
  color: #333;
  border-bottom: 1px #ececec solid;
  margin-left: 0.3rem;
  margin-right: 0.3rem;
  margin-top: 1.3rem;
}
.question-header {
  font-size: 0.6rem;
  margin-top: 0.3rem;
  margin-bottom: 0.3rem;
}
.question-body {
  font-size: 0.4rem;
}
.question-bottom {
  display: flex;
  line-height: 0.3rem;
  margin-top: 0.15rem;
}
.question-bottom .date {
  margin-left: 0.3rem;
}
.question-bottom .viewed {
  margin-left: 0.3rem;
}

.answer-list {
  list-style: none;
}
.answer-item {
  width: 90%;
  margin: auto;
  border-bottom: 1px solid rgb(236, 236, 236);
  padding: 0.3rem;
}
.answer-header {
  display: flex;
  padding-bottom: 0.3rem;
}
.answer-header .avatar {
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  display: block;
  background: #ccc;
  margin-right: 0.3rem;
}
.answer-header .userinfo {
  font-size: 0.3rem;
}
.answer-header .userinfo .name {
  font-size: 0.4rem;
}
.answer-header .userinfo .date {
  font-size: 0.3rem;
  margin-top: 0.1rem;
}
.answer-body {
  display: flex;
}
.answer-body-left {
  width: auto;
  font-size: 0.4rem;
}
.answer-body-right {
  flex: 75%;
  width: auto;
  font-size: 0.35rem;
  margin-left: 1.15rem;
}
.answer-body-right .answer-content {
  line-height: 0.4rem;
}
.answer-body-right .answer-bottom {
  font-size: 0.5rem;
  margin-top: 0.2rem;
}
.answer-body-right .answer-bottom .remarks {
  float: right;
}
.answer-body-right .answer-bottom .comments {
}

/* question detail end */
.list-demo .location {
  position: relative;
  font-size: 0.3rem;
  color: gray;
  background: gainsboro;
  padding: 0 0.1rem;
  border-radius: 0.05rem;
}
.list-demo {
  margin-top: 2.5rem;
}
.remarks,
.answers,
.comments,
.visits {
  float: left;
  display: flex;
  width: 1rem;
  margin-right: 0.45rem;
}
.remarks,
.answers,
.comments,
.visits p {
  margin-left: 0.05rem;
  line-height: 0.6rem;
}
.list_demo_a .thirddd {
  margin-top: 0.3rem;
}
.list_demo_a .item_title {
  line-height: 0.5rem;
  height: auto;
  /* max-height: 0.5rem; */
  margin-bottom: 0.1rem;
}
.list_demo_a .attr-demo {
  margin-top: 0;
  height: auto;
  line-height: 0.4rem;
}
.list_demo_a img {
  width: 2rem;
  border-radius: 50%;
  margin-left: 0.2rem;
}
.list_demo_a .list_left {
  flex: 30%;
}
.list_demo_a .list_right {
  flex: 70%;
}
.infinite-list {
  height: 100%;
  padding: 0;
  margin: 0;
  list-style: none;
}
.infinite-list .infinite-list-item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  background: var(--el-color-primary-light-9);
  margin: 10px;
  color: var(--el-color-primary);
}
.infinite-list .infinite-list-item + .list-item {
  margin-top: 10px;
}

@import url("@/assets/css/list_20_ershou_new_v20170613192207.css");
</style>
